<template>
  <!-- 新增用户 -->
  <el-dialog
    v-model="props.modelValue"
    :append-to-body="true"
    width="1000px"
    class="dialog-class"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ dialogTitle }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <el-form
      ref="formEl"
      :model="formData"
      :rules="rules"
    >
      <el-row>
        <el-col
          :span="18"
          :offset="3"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="formData.userName"
              :disabled="dialogType === 'edit'"
              :placeholder="t('register.r1_1')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="18"
          :offset="3"
        >
          <el-form-item prop="email">
            <el-input
              v-model="formData.email"
              :disabled="dialogType === 'edit'"
              :placeholder="t('organizationStructure.OStructure.p2')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="18"
          :offset="3"
        >
          <el-form-item prop="phoneNumber">
            <el-input
              type="number"
              v-model="formData.phoneNumber"
              :placeholder="t('organizationStructure.OStructure.p3')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="18"
          :offset="3"
        >
          <el-form-item prop="password" >
            <el-input
              @input="inputFn"
              id="pwd"
              v-model="formData.password"
              :placeholder="dialogType === 'edit' ? t('organizationStructure.OStructure.p4_1') : t('organizationStructure.OStructure.p4')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col
          v-if="storeLogin.userInfo.isAdmin === '1'"
          :span="18"
          :offset="3"
        >
          <el-form-item prop="customerRoleId">
            <el-select
              v-model="formData.customerRoleId"
              :placeholder="t('organizationStructure.OStructure.p5')"
              class="wp-100"
              clearable
               filterable
            >
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer flexcc">
        <el-button
          color="#252628"
          plain
          @click="handleCancel"
          >{{ t('organizationStructure.OStructure.db2') }}</el-button
        >
        <el-button
          color="#252628"
          type="primary"
          @click="handleConfirm"
          >{{ t('organizationStructure.OStructure.db1') }}</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onBeforeMount, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useLogin from '@/stores/login'
import { getRoleListAll, addCustomer, editCustomer, getCustomerEcho } from '@/service/organizationStructure'
import { getCustomerInfoApi } from '@/service/login.js'

import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()
const storeLogin = useLogin()
const { setUserInfo } = storeLogin

onBeforeMount(() => {
  init()
})
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  dialogType: {
    type: String,
    default: 'add'
  },
  editId: {
    type: Number
  }
})

const dialogTitle = computed(() => {
  const obj = {
    add: t('organizationStructure.OStructure.d1'),
    edit: t('organizationStructure.OStructure.d1_1')
  }
  return obj[props.dialogType]
})

const emit = defineEmits(['update:modelValue', 'getList'])

const handleClose = () => {
  emit('update:modelValue', false)
}

const handleCancel = () => {
  emit('update:modelValue', false)
}

//
const formEl = ref(null)
const formData = ref({})
const rules = ref({
  userName: [{ required: true, message: t('organizationStructure.OStructure.r1'), trigger: 'blur' }],
  email: [{ required: true, message: t('organizationStructure.OStructure.r2'), trigger: 'blur' }],
  phoneNumber: [{ required: true, message: t('organizationStructure.OStructure.r3'), trigger: 'blur' }],
  password: [{ required: true, message: t('organizationStructure.OStructure.r4'), trigger: 'blur' }],
  customerRoleId: [{ required: true, message: t('organizationStructure.OStructure.r5'), trigger: 'change' }]
})

//提交
const handleConfirm = () => {
  const obj = {
    add: addCustomer,
    edit: editCustomer
  }

  if (!formEl) return
  formEl.value.validate((valid, fields) => {
    if (valid) {
      obj[props.dialogType]({
        enterpriseId: storeLogin.userInfo.enterpriseId,
        ...formData.value
      }).then(({ msg }) => {
        ElMessage.success(msg)
        getUserInfo()
        handleClose()
        emit('getList')
      })
    }
  })
}

// 获取登录用户信息
const getUserInfo = () => {
  getCustomerInfoApi().then(({ data }) => {
    setUserInfo(data)
  })
}

// 职务列表
const roleList = ref([])
const getList = () => {
  getRoleListAll({
    enterpriseId: storeLogin.userInfo.enterpriseId
  }).then(({ data }) => {
    roleList.value = data
  })
}

// 回显
const getDetail = () => {
  getCustomerEcho(props.editId).then(({ data }) => {
    formData.value = data
    formData.value.password = null
    rules.value.password[0].required = false
  })
}
const inputFn=()=>{
  document.getElementById('pwd').type='password'
}
//
const init = () => {
  getList()
  if (props.dialogType === 'edit') {
    getDetail()
  }
}
</script>

<style scoped lang="scss"></style>
